import React from 'react';
import { Dropdown, message } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { ll } from '../../utils/storage';
import type { MenuProps } from 'antd';
import { useNavigate } from 'react-router-dom';
const Index = () => {
  const navigate = useNavigate()
  const userInfo = ll.getItem('userInfo') || {}

  const items: MenuProps['items'] = [
    {
      label: '1st menu item',
      key: '1',
      icon: <UserOutlined />,
    },
    {
      label: '2nd menu item',
      key: '2',
      icon: <UserOutlined />,
    },
    {
      label: '3rd menu item',
      key: '3',
      icon: <UserOutlined />,
      danger: true,
    },
    {
      label: '退出登录',
      key: '4',
      icon: <UserOutlined />,
      danger: true,
    },
  ];

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    if (e.key === '4') {
      ll.removeItem('userInfo')
      ll.removeItem('token')
      navigate('/login')
    }
  };
  const menuProps = {
    items,
    onClick: handleMenuClick,
  }

  return (
    <div className='item'>
      <Dropdown.Button menu={menuProps} icon={<UserOutlined />}>{userInfo.nickname}</Dropdown.Button>
    </div>
  )

}


export default Index;